<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns="http://www.w3.org/1999/html">
<head>
    <title>详细信息</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all"/>
</head>
<body class="childrenBody layui-center">
<form class="layui-form layui-form-pane" lay-filter="user">
    <div class="layui-form-item top">
        <div class="layui-inline">
            <label class="layui-form-label myRequired">用户名:</label>
            <div class="layui-input-inline">
                <input type="text" name="realName" id="realName" class="layui-input" maxlength="20"
                       lay-verify="required" lay-reqtext="请输入用户名" placeholder="请输入用户名，最多20字" >
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label myRequired">登录名:</label>
            <div class="layui-input-inline">
                <input type="text" name="loginName" id="loginName" class="layui-input" maxlength="20"
                       lay-verify="required" lay-reqtext="请输入登录名" placeholder="请输入登录名，最多20个字"/>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline" id="d_loginPwd">
            <label class="layui-form-label myRequired">密码:</label>
            <div class="layui-input-inline">
                <input type="password" name="loginPwd" id="loginPwd" class="layui-input" maxlength="12"
                       lay-verify="required" lay-reqtext="请输入密码" placeholder="请输入6~12位密码">
            </div>
        </div>
        <div class="layui-inline" id="d_checkpassword">
            <label class="layui-form-label myRequired">确认密码:</label>
            <div class="layui-input-inline">
                <input type="password" name="checkpassword" id="checkpassword" class="layui-input" maxlength="12"
                       lay-verify="required" lay-reqtext="请再次输入密码" placeholder="请输入6~12位密码">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label myRequired">手机号码:</label>
            <div class="layui-input-inline">
                <input type="text" name="mobile" id="mobile" class="layui-input" lay-verify=“phone” placeholder="请输入正确的手机号">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label myRequired">邮箱:</label>
            <div class="layui-input-inline">
                <input type="text" name="mail" id="mail" class="layui-input" lay-verify=“mail” placeholder="请输入邮箱">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label myRequired">性 别:</label>
            <div class="layui-input-inline">
                <input type="radio" name="gender" title="男" value="1" checked>
                <input type="radio" name="gender" title="女" value="0">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label myRequired">状态:</label>
            <div class="layui-input-inline">
                <input type="radio" name="locked" title="正常" value="false" checked>
                <input type="radio" name="locked" title="锁定" value="true">
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-center">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="saveUser" id="saveUser">保存</button>
            <button class="layui-btn" lay-submit lay-filter="updateUser" id="updateUser">保存</button>
            <button type="button" class="layui-btn layui-btn-normal" onclick="colsePanl()">取消</button>
            <input type="hidden" name="id" id="id" class="layui-input"/>
        </div>
    </div>
</form>
</body>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">
    layui.use(['form', 'layer', 'jquery'], function () {
        let form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        //新增
        form.on('submit(saveUser)', function (data) {
            var loginPwd = data.field.loginPwd;
            var checkpassword = data.field.checkpassword;
            if(loginPwd != checkpassword) {
                parent.layer.alert('两次密码输入不一致', {icon: 5});
                return false;
            }
            delete data.field.checkpassword;
            $.ajax({
                url: 'add',
                type: 'post',
                data: JSON.stringify(data.field),
                contentType: 'application/json;charset=UTF-8',
                success: function (result) {
                    if (result.success == true) {
                        parent.layer.alert(result.message, function(){
                            parent.layer.closeAll();
                            parent.location.reload();
                        });
                    } else {
                        parent.layer.alert(result.message, {icon: 5});
                    }
                }
            });
            return false;
        });
        //修改
        form.on('submit(updateUser)', function (data) {
            delete data.field.checkpassword;
            delete data.field.loginPwd;
            $.ajax({
                url: 'update',
                type: 'post',
                data: JSON.stringify(data.field),
                contentType: 'application/json;charset=UTF-8',
                success: function (result) {
                    if (result.success == true) {
                        parent.layer.alert(result.message, function(){
                            parent.layer.closeAll();
                            parent.location.reload();
                        });
                    } else {
                        parent.layer.alert(result.message, {icon: 5});
                    }
                }
            });
            return false;
        });
        form.val('user', {
            "realName": '[[${user.realName}]]',
            "loginName": '[[${user.loginName}]]',
            "loginPwd": '[[${user.loginPwd}]]',
            "checkpassword": '[[${user.loginPwd}]]',
            "mobile": '[[${user.mobile}]]',
            "mail": '[[${user.mail}]]',
            "locked": '[[${user.locked}]]',
            "gender": '[[${user.gender}]]',
            "id": '[[${user.id}]]'
        });

        if(!isNaN([[${user.id}]])) {
            $('#d_loginPwd').hide();
            $('#d_checkpassword').hide();
            $('#saveUser').hide();
        }else{
            $('#updateUser').hide();
            $('#setPwd').hide();
        }

        form.render();
    });

    //取消按钮
    function colsePanl() {
        parent.layui.layer.closeAll();
    }
</script>
</html>
